<template>
  <iframe class="embedIfram" id="newdexIframe" frameborder="0"></iframe>
</template>

<script>
// import { TronModel } from '@/utils/eos/';
import { getReqUrl } from '@/utils/validate';

export default {
  name: 'newpool-eos', // 矿池
  data() {
    return {
      parentUrl: '',
      targetOrigin: '',
    }
  },
  components: {
  },
  props: {},
  watch: {
    '$store.state.app.theme': function change() {
      const response = {
        language: this.$store.state.app.language, // en / zh-CN / zh-TW / ko
        theme: this.$store.state.app.theme === 'theme-278EDA' ? 'white' : 'dark' // white / dark
      }
      this.handleResponseMessage('getConfig', response);
    },
    '$store.state.app.language': function change() {
      const response = {
        language: this.$store.state.app.language, // en / zh-CN / zh-TW / ko
        theme: this.$store.state.app.theme === 'theme-278EDA' ? 'white' : 'dark' // white / dark
      }
      this.handleResponseMessage('getConfig', response);
    },
    '$store.state.app.scatter.identity': {
      handler: function listen() {
        const scatter = this.$store.state.app.scatter;
        let response = {
          identity: null,
          labelName: null,
          wallet: 'TronLink',
          chain: 'tron',
        }
        if (scatter && scatter.identity) {
          response = scatter;
        }
        this.handleResponseMessage('getAccount', response);
      },
      deep: true,
    },
  },
  computed: {},
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
  mounted() {
    this.parentUrl = window.location.origin;
    this.handleMounted();
  },
  beforeDestroy() {
    window.removeEventListener('message', this.handleReceiveMessage, false);
  },
  methods: {
    handleMounted() {
      const env = process.env.NODE_ENV;
      let src = 'https://newpool.io'
      if (env === 'development' || env === 'tron') {
        src = `http://${getReqUrl('ip')}:${process.env.VUE_APP_PORT22}`
      }
      this.targetOrigin = src;
      const iframeSrc = `${src}/tron/embed?origin=${encodeURIComponent(this.parentUrl)}&v=${new Date().getTime()}`;
      document.getElementById('newdexIframe').setAttribute('src', iframeSrc)
      window.addEventListener('message', this.handleReceiveMessage, false);
      document.getElementById('newdexIframe').onload = (() => {
        document.getElementById('newdexIframe').style = 'min-height: 1900px; vertical-align: middle;';
      })
    },
    handleReceiveMessage(event) {
      const storeApp = this.$store.state.app;
      const origin = event.origin || event.originalEvent.origin;
      if (origin !== this.targetOrigin) return;
      const message = JSON.parse(event.data);
      console.log('eosNewpool->action', message); // eslint-disable-line
      switch (message.action) {
        case 'getConfig': {
          const response = {
            language: storeApp.language, // en / zh-CN / zh-TW / ko
            theme: storeApp.theme === 'theme-278EDA' ? 'white' : 'dark' // white / dark
          }
          this.handleResponseMessage(message.action, response);
          break;
        }
        case 'getAccount': {
          const scatter = storeApp.scatter;
          let response = {
            identity: null,
            labelName: null,
            wallet: 'TronLink',
            chain: 'tron',
          }
          if (scatter && scatter.identity) {
            response = scatter;
          }
          this.handleResponseMessage(message.action, response);
          break;
        }
        case 'setHeight': {
          console.log('get Height', message.data.height + 'px'); // eslint-disable-line
          document.getElementById('newdexIframe').style.height = `${parseInt(message.data.height, 0)}px`;
          break;
        }
        case 'walletLogin': {
          this.$emit('listenWalletLogin', true);
          break;
        }
        default:
      }
    },

    handleResponseMessage(action, data) {
      const iframe = document.getElementById('newdexIframe');
      const message = { action, data }
      iframe.contentWindow.postMessage(JSON.stringify(message), this.targetOrigin);
    }
  },
}
</script>
<style lang="scss" scoped>
</style>

